<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome</title>
	<link rel="stylesheet" href="./css/library_common.css"/>
	<link rel="stylesheet" type="text/css" media="all" href="fancybox/jquery.fancybox.css">
  	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  	<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script>
</head>
<body class="margined_body">
	<div style="display: table;">
		<div style="display: table-row;">
			<div style="display: table-cell;" class="div_logo">
			</div>
			<div style="display: table-cell;" class="div_login">
				<table align="center">
					<tr>
						<td>Username:</td>
						<td><input type="text" class="textGlowing_mandatory" /></td>
					</tr>
					<tr>
						<td>Password:</td>
						<td><input type="password" class="textGlowing_mandatory"/></td>
					</tr>
					<tr></tr>
					<tr></tr>
					<tr></tr>
					<tr>
						<td><input type="button" id="login" value="Submit" class="button_glow"/></td>
						<td><input type="button" value="Reset" class="button_glow"/></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	<br><br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="modalbox" href="#inline"><b style="color: orange;">New User? Click To Register.</b> </a>
	<div id="inline" style="display: none;height: 230px;width: 350px;">
		<h2>Register to get Access</h2>
	
		<form id="contact" name="contact" action="#" method="post">
			<table>
				<tr>
					<td>First Name</td>
					<td><input type="text" id="fname" name="fname" class="textGlowing_mandatory"></td>
				</tr>
				<tr>
					<td>Last Name</td>
					<td><input type="text" id="lname" name="lname" class="textGlowing_mandatory"></td>
				</tr>
				<tr>
					<td><label for="email">Email</label></td>
					<td><input type="email" id="email" name="email" class="textGlowing_mandatory"></td>
				</tr>
			</table>
			<br>
			<button id="send" class="button_glow">Send</button>
			<button id="reset" class="button_glow">Reset</button>
		</form>
	</div>
</body>
<!-- basic fancybox setup -->
<script type="text/javascript">
	function validateEmail(email) { 
		var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		return reg.test(email);
	}

	$(document).ready(function() {
		$(".modalbox").fancybox();
		$("#contact").submit(function() { return false; });
		$("#login").on("click",function() {parent.location='./pages/home.html';})
		
		$("#send").on("click", function(){
			
				fname = document.getElementById("fname").value;
				lname = document.getElementById("lname").value;
				email = document.getElementById("email").value;
				
				$("#send").replaceWith("<em>Please wait...</em>");
				
				$.ajax({
					type: 'POST',
					url: 'createUser.htm',
					data: '&fname='+fname+'&lname='+lname+'&email='+email,
					success: function(data) {
						if(data != null) {
							$("#inline").fadeOut("fast", function(){
							    $(this).before("<p><strong>User successfully created, check your mail.</strong></p>");
							    setTimeout("$.fancybox.close()", 1000);
							});
						}
					}
				});
		});
	});
</script>
</html>